<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>dojox.Grid with Dojo.Data via binding.  Multiple Store implementations.</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
	<style type="text/css">
		@import "../../../../dijit/themes/tundra/tundra.css";
		@import "../../../../dojo/resources/dojo.css";
		@import "../../../../dijit/tests/css/dijitTests.css";
		@import "../../_grid/tundraGrid.css";
		
		#grid, #grid2, #grid3, #grid4, #grid5, #grid6{
			width: 65em;
			height: 25em;
			padding: 1px;
		}
	</style>
	<script type="text/javascript" src="../../../../dojo/dojo.js" 
		djConfig="isDebug: true, debugAtAllCosts: false, parseOnLoad: true"></script>
	<script type="text/javascript">
		dojo.require("dojox.grid.Grid");
		dojo.require("dojo.data.ItemFileReadStore");
		dojo.require("dojox.data.CsvStore");
		dojo.require("dojox.data.XmlStore");
		dojo.require("dojox.data.FlickrStore");
		dojo.require("dojox.data.OpmlStore");
		dojo.require("dojox.data.HtmlStore");
		dojo.require("dojo.parser");
	</script>

	<script type="text/javascript">
		function getRow(inRowIndex){
			return ' ' + inRowIndex;
		}
		
		var formatHref = function(attribute, rowIndex) {
			model = dataModel4;
			if(!model)
				return "?";
			var value = model.getRow(rowIndex);
			if(value && value[attribute])
				return "<a href=\"" + value[attribute] + "\" target=\"_blank\">Image Link</a>";
			return "";
		}

		var layoutMovies = [
			// view 0
			{ type: 'dojox.GridRowView', width: '20px' },
			// view 1
			{ cells: [[{ name: "Row", get: getRow, width: 5}]], noscroll: true},
			// view 2
			{ cells: [[
				{ field: "Title", width: 'auto' },
				{ field: "Year", width: 5 },
				{ field: "Producer", width: 20 }
			]]}
		];
		
		var layoutCountries = [
			// view 0
			{ type: 'dojox.GridRowView', width: '20px' },
			// view 1
			{ cells: [[{ name: "Row", get: getRow, width: 5}]], noscroll: true},
			// view 2
			{ cells: [[
				{ field: 0, width: 'auto' },
				{ width: 8 }
			]]}
		];

		var layoutBooks = [
			// view 0
			{ type: 'dojox.GridRowView', width: '20px' },
			// view 1
			{ cells: [[{ name: "Row", get: getRow, width: 5}]], noscroll: true},
			// view 2
			{ cells: [[
				{ field: "title", width: 'auto' },
				{ field: "isbn", width: '8' }
			]]}
		];

		//Lay out the Flickr data so one column is a URL.  This makes use of the
		//get function of a cell.
		var layoutFlickrData = [
			// view 0
			{ type: 'dojox.GridRowView', width: '20px' },
			// view 1
			{ cells: [[{ name: "Row", get: getRow, width: 5}]], noscroll: true},
			// view 2
			{ cells: [[
				{ name: "Title", field: "title", width: 'auto' },
				{ name: "Image URL", field: "imageUrl", width: '15', get: dojo.partial(formatHref, "imageUrl")}
			]]}
		];

		var layoutOpmlData = [
			// view 0
			{ type: 'dojox.GridRowView', width: '20px' },
			// view 1
			{ cells: [[{ name: "Row", get: getRow, width: 5}]], noscroll: true},
			// view 2
			{ cells: [[
				{ name: 'Name', field: 'text', width: 'auto'},
				{ name: 'Type', field: 'type', width: '8' }
			]]}
		];

		var layoutHtmlTable = [
			// view 0
			{ type: 'dojox.GridRowView', width: '20px' },
			// view 1
			{ cells: [[{ name: "Row", get: getRow, width: 5}]], noscroll: true},
			// view 2
			{ cells: [[
				{ name: 'Column 1', field: 'Column 1', width: 'auto'},
				{ name: 'Column 2', field: 'Column 2', width: 'auto'},
				{ name: 'Column 3', field: 'Column 3', width: 'auto'},
				{ name: 'Column 4', field: 'Column 4', width: 'auto'}
			]]}
		];
	</script>
</head>
<body class="tundra">
	<h1>dojox.Grid using Dojo.Data stores via simple binding with multiple store implementations.</h1>
	<p>
		This page demonstrates the Grid can display data accessed by dojo.data implementing Datastores.  
		Each of the datastores used stores data in a different format, and as this test and demonstration
		page shows, the logic for rendering the data is virtually identical.  You define your source store,
		you define the model for accessing the data, which is ij this case the dojox.grid.data.DojoData model
		and then you define the layout, which maps the data attribute names to columns in the grid.  You can 
		even perform cusomization of what is displayed, as demonstrated in the dojox.data.FlickrStore layout.  
		The image url is displayed as a clickable link that opens a new page.
	</p>
	<p>
		The choice of stores used were ones that did not require back end services to function for sake of 
		simplicity.  There is no reason that dojox.data.QueryReadStore could not be used with grid as well,
		it just requires a back end service to send it the query results.
	</p>
	<p><b>Stores used:</b></p>
	<ul>
		<li>dojo.data.ItemFileReadStore</li>
		<li>dojox.data.CvsStore</li>
		<li>dojox.data.XmlStore</li>
		<li>dojox.data.FlickrStore</li>
		<li>dojox.data.OpmlStore</li>
		<li>dojox.data.HtmlTableStore</li>
	</ul>

	<h2>dojo.data.ItemFileReadStore:</h2>
	<i>Displays a list of countries through ItemFileReadStore format.</i>
	<span dojoType="dojo.data.ItemFileReadStore" 
		jsId="jsonStore" url="../../../../dijit/tests/_data/countries.json">
	</span>
	<span dojoType="dojox.grid.data.DojoData" 
		jsId="dataModel" 
		rowsPerPage="20"
		store="jsonStore" 
		query="{ name : '*' }">
	</span>
	<div id="grid" dojoType="dojox.Grid" elasticView="2" 
		model="dataModel" structure="layoutCountries">
	</div>


	<h2>dojox.data.CsvStore:</h2>
	<i>Displays a list of movies that were stored in CSV format.</i>
	<span dojoType="dojox.data.CsvStore" 
		jsId="csvStore" url="support/movies.csv">
	</span>
	<span dojoType="dojox.grid.data.DojoData" 
		jsId="dataModel2"
		store="csvStore"
		rowsPerPage="5"
		query="{ Title: '*' }"
		clientSort="true">
	</span>
	<div id="grid2" dojoType="dojox.Grid" elasticView="2" 
		model="dataModel2" structure="layoutMovies">

	</div>

	<h2>dojox.data.XmlStore:</h2>
	<i>Displays a list of books that were stored in XML format.</i>
	<span dojoType="dojox.data.XmlStore" 
		jsId="xmlStore" url="support/books.xml">
	</span>
	<span dojoType="dojox.grid.data.DojoData" 
		jsId="dataModel3" 
		rowsPerPage="5"
		store="xmlStore" 
		query="{ title : '*' }">
	</span>
	<div id="grid3" dojoType="dojox.Grid" elasticView="2" 
		model="dataModel3" structure="layoutBooks">
	</div>


	<h2>dojox.data.FlickrStore:</h2>
	<i>Displays Flickr imformation on 3DNY (Dojo Developer Days, New York) from the flickr public photo feed, accessed via the FlickrStore dojo.data implementation.</i>
	<span dojoType="dojox.data.FlickrStore" 
		jsId="flickrStore">
	</span>
	<span dojoType="dojox.grid.data.DojoData" 
		jsId="dataModel4" 
		rowsPerPage="5"
		store="flickrStore" 
		query="{ tags : '3dny' }">
	</span>
	<div id="grid4" dojoType="dojox.Grid" elasticView="2" 
		model="dataModel4" structure="layoutFlickrData">
	</div>


	<h2>dojox.data.OpmlStore:</h2>
	<i>Scans an Opml based document for all items of type 'country'</i> 
	<span dojoType="dojox.data.OpmlStore" 
		jsId="opmlStore" url="support/geography.xml">
	</span>
	<span dojoType="dojox.grid.data.DojoData" 
		jsId="dataModel5" 
		rowsPerPage="5"
		store="opmlStore" 
		query="{ type : 'country' }"
		queryOptions="{deep: true}"
		sortFields="[ { attribute : 'text' } ]">
	</span>
	<div id="grid5" dojoType="dojox.Grid" elasticView="2" 
		model="dataModel5" structure="layoutOpmlData">
	</div>


	<h2>dojox.data.HtmlStore:</h2>
	<i>Loads the grid from an HTML Table.</i> 
	<span dojoType="dojox.data.HtmlStore" 
		jsId="htmlStore" dataId="tableExample">
	</span>
	<span dojoType="dojox.grid.data.DojoData" 
		jsId="dataModel6" 
		rowsPerPage="5"
		store="htmlStore" 
		query="{}">
	</span>
	<div id="grid6" dojoType="dojox.Grid" elasticView="2" 
		model="dataModel6" structure="layoutHtmlTable">
	</div>

	<!-- 
		Inline data table to be displayed bu the grid! 
		This is accessed via the dojox.data.HtmlTableStore
	-->
	<table id="tableExample" style="display: none;">
		<thead>
			<tr>
				<th>Column 1</th>
				<th>Column 2</th>
				<th>Column 3</th>
				<th>Column 4</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>This</td>
				<td>is</td>
				<td></td>
				<td>empty in column 3</td>
			</tr>
			<tr>
				<td>This</td>
				<td>is</td>
				<td>a</td>
				<td>value</td>
			</tr>
			<tr>
				<td>Who?</td>
				<td>What?</td>
				<td>When?</td>
				<td>Where?</td>
			</tr>
			<tr>
				<td>She</td>
				<td>sells</td>
				<td>sea</td>
				<td>shells</td>
			</tr>
		</tbody>
	</table>
</body>
</html>


